import React, {Fragment, useRef, useState} from 'react';
import {Button, Select, Table, Tag} from "antd";
import ButtonGroup from "antd/es/button/button-group";
import Icon from "antd/es/icon";


function AntdProject(props) {
    const [tableData, setTableData] = useState([
        {
            id: 1,
            name: "张三",
            age: 23,
            address: "南京市",
            good: "手机",
            tags: ["手机1", "手机2"]
        },
        {
            id: 2,
            name: "李四",
            age: 22,
            address: "北京市",
            good: "洗衣机",
            tags: ["洗衣机13", "洗衣机23"]
        },
        {
            id: 3,
            name: "康康",
            age: 24,
            address: "上海市",
            good: "电话机",
            tags: ["电话机112", "电话机2121"]
        },
        {
            id: 4,
            name: "红红",
            age: 26,
            address: "天津市",
            good: "电视机",
            tags: ["电视机1fffff", "电视机2asasas22222", "电视机2asasas"]
        }
    ])
    // react的特点jsx自带插槽 render 自定义单元格
    const columns = useRef([
        {
            title: "标识",  // 列的列头
            dataIndex: "tags", // 列的内容
            key: "tags",  // 列的唯一值,
            render: tags => (
                <span>
                    {tags.map(item => {
                        return (
                            <Tag color={"volcano"} key={item}>{item}</Tag>
                        )
                    })}
                </span>
            )  // 自定义单元格
        },
        {
            title: "姓名",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "年龄",
            dataIndex: "age",
            key: "age",
        },
        {
            title: "地址",
            dataIndex: "address",
            key: "address",
        },
        {
            title: "商品",
            dataIndex: "good",
            key: "good",
        }
    ]);
    const { Option } = Select;
    const [optionList, setOptionList] = useState([
        {
            id: 1,
            name: "Lucy"
        },
        {
            id: 2,
            name: "Boy"
        },
        {
            id: 3,
            name: "Brother"
        },
        {
            id: 4,
            name: "Sister"
        },
    ])
    const handSelect = (value) => {
        console.log('QQQQ change的值', value);
    }
    return (
        <Fragment>
            <Table columns={columns.current} dataSource={tableData} rowKey="id" bordered></Table>
            <hr/>
            <Select onChange={handSelect} defaultValue="lucy" style={{width: 100}}>
                {optionList.map(item => (
                    // Option是由Select解构出来的
                    <Option key={item.id} value={item.id}>{item.name}</Option>
                ))}
            </Select>
        </Fragment>
    );
}

export default AntdProject;
